<template>
  <div>
    <el-backtop :bottom="100">
      <div
        style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
      >
       Up
      </div>
    </el-backtop>
    <top-bar></top-bar>
    <!--左侧商品分类栏-->
    <div class="menu">
      <div class="menubar">
        <i class="el-icon-menu"></i>
        商品分类
      </div>
    </div>
    <div class="line"></div>
    <!--    给商品分类栏添加轮播图-->
    <div class="bg">
      <div class="contentmenu">
        <ul v-for="(item ,i ) in cateList1" :key="i">
          <li @mouseenter="showContentById(i)" @mouseleave="closeContentById(i)"><i :class="iconObj[i]"></i>{{item.name}}
          </li>
        </ul>
      </div>
      <!--按照id显示商品的对话框-->
      <div class="goods" v-if="isShowGoods" @mouseenter="showInfo" @mouseleave="isShowGoods=false">
        <el-row :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']" v-for="(item1, i1) in goodsList"
                :key="item1.cat_id">
          <!-- 渲染一级权限 -->
          <el-col :span="5">
            <el-tag closable>{{item1.cat_name}}</el-tag>
            <i class="el-icon-caret-right"></i>
          </el-col>
          <!-- 渲染二级和三级权限 -->
          <el-col :span="19">
            <!-- 通过 for 循环 嵌套渲染二级权限 -->
            <el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2, i2) in item1.children" :key="item2.id">
              <el-col :span="6">
                <el-tag type="success" @click="toCateGoods(item2.cat_id)">{{item2.cat_name}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="18">
                <el-tag
                  type="warning"
                  v-for="(item3) in item2.children"
                  :key="item3.id" @click="toCateGoods(item3.cat_id)">{{item3.cat_name}}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--下一栏商品区域-->
    <div class="goods-line">小王超市XWANG.MART</div>
    <div class="line1">
      <div class="line1_good" v-for="(item ,i ) in goodList3" :key="i" @click="showGoodsDetail(item.goods_id)">
        <div class="line1_shop_pic">
          <img :src="item.pics[0].pics_big_url" alt="">
        </div>
        <div class="line1_shop_des">
          <div class="line_shop_des_name">{{item.goods_name}}</div>
          <div class="line_shop_des_price">{{item.goods_price | finalPrice}}</div>
        </div>
      </div>
    </div>
    <!--    下三栏区域-->
    <div class="line3">
      <img src="../../assets/imgs/header.jpg" alt="">
    </div>
    <!--   下两栏商品区域-->
      <div class="line1">
        <div class="line1_good" v-for="(item ,i ) in goodList4" :key="i" @click="showGoodsDetail(item.goods_id)">
          <div class="line1_shop_pic">
            <img :src="item.pics[0].pics_big_url" alt="">
          </div>
          <div class="line1_shop_des">
            <div class="line_shop_des_name">{{item.goods_name}}</div>
            <div class="line_shop_des_price">{{item.goods_price | finalPrice}}</div>
          </div>
        </div>
      </div>
    <!--   底部信息栏区域-->
    <div class="container footer">
      <div class="span24">
        <div class="footerAd">
          <img src="../../assets/imgs/footer.jpg" alt="我们的优势" title="我们的优势" height="52" width="950">
        </div>
      </div>
      <div class="span24">
        <ul class="bottomNav">
          <li>
            <a>关于我们</a>
            |
          </li>
          <li>
            <a>联系我们</a>
            |
          </li>
          <li>
            <a>诚聘英才</a>
            |
          </li>
          <li>
            <a>法律声明</a>
            |
          </li>
          <li>
            <a>友情链接</a>
            |
          </li>
          <li>
            <a target="_blank">支付方式</a>
            |
          </li>
          <li>
            <a target="_blank">配送方式</a>
            |
          </li>
          <li>
            <a>SHOP++官网</a>
            |
          </li>
          <li>
            <a>SHOP++论坛</a>

          </li>
        </ul>
      </div>
      <div class="span24">
        <div class="copyright">Copyright © 2005-2020 小王商城 版权所有</div>
      </div>
    </div>
  </div>
</template>
<script>
// import _ from 'lodash'
import TopBar from '../commom/Topbar'
export default {
  data () {
    return {
      //  账号是否被激活
      is_active: false,
      //  获取的商品分类绑定的对象
      cateList: [],
      //  获取的商品分类绑定的对象
      cateList1: [
        { name: '热门推荐' },
        { name: '手机 /数码 /电脑办公 ' },
        { name: '女装 /内衣' },
        { name: '男装 /运动户外' },
        { name: '女鞋 /男鞋 /箱包' },
        { name: '美妆 /个护健康' },
        { name: '腕表 /眼镜 /珠宝饰品' },
        { name: '母婴玩具' },
        { name: '食品 /茶酒' },
        { name: '小家电 /生活电器' },
        { name: '家具建材' },
        { name: '汽车 /配件 /用品' },
        { name: '厨具 /收纳' },
        { name: '邮币/乐器' }
      ],
      //  分类id数组
      cat_id: [],
      //  获取商品分类
      queryInfo: {
        type: '',
        pagenum: '1',
        pagesize: '1000'
      },
      goodsQueryInfo: {
        query: '',
        pagenum: '1',
        pagesize: '1000'
      },
      //  回到顶部
      isTopShow: false,
      //  是否展示商品列表
      isShowGoods: false,
      //  被选中的商品列
      goodsList: [],
      //  左侧菜单栏图标
      iconObj: [
        'iconfont  icon-hot',
        'iconfont  icon-Householdappliances',
        'iconfont  icon-ipad',
        'iconfont  icon-bussiness-man',
        'iconfont  icon-apparel',
        'iconfont  icon-dfdf05',
        'iconfont  icon-beauty',
        'iconfont  icon-zhubao',
        'iconfont  icon-naifen',
        'iconfont  icon-jiu',
        'iconfont  icon-Householdappliances',
        'iconfont  icon-color',
        'iconfont  icon-auto',
        'iconfont  icon-dianqi',
        'iconfont  icon-Non-staplefood'
      ],
      //  获取的所有推荐商品数据绑定列表
      goodList: {},
      //  下一栏商品绑定的数据
      goodList1: {},
      //  带图片的30个热销产品
      goodList2: [],
      //  下一栏的原始商品数据
      goodList3: [],
      //  下两栏的商品数据
      goodList4: [],
      //  移出的分类id
      cat_index: -1
    }
  },
  //  导入的组件
  components: {
    TopBar
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    document.removeEventListener('scroll', this.handleScroll)
    document.body.scrollTop = document.documentElement.scrollTop = 0
  },
  watch: {
    //  判断是否登陆
    isActive () {
      if (window.sessionStorage.token) {
        this.is_active = true
      }
      this.is_active = false
    }
  },
  created () {
    this.getCateList()
    // this.getGoodsList()
  },
  //  自定义filter函数，用{{ 参数 | 方法() }} 的方式调用
  filters: {
    finalPrice (price) {
      return '¥ ' + price.toFixed(2, 0)
    }
  },
  methods: {
    async getCateList () {
      const { data: res } = await this.$http.get('v2/categories/', { params: this.queryInfo })
      // console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品分类失败！')
        // console.log(res.data)
      }
      this.cateList = res.data.result
      this.cat_id[0] = this.cateList[1]
      this.cat_id[1] = this.cateList[4]
      this.cat_id[2] = this.cateList[17]
      this.cat_id[3] = this.cateList[15]
      this.cat_id[4] = this.cateList[16]
      this.cat_id[5] = this.cateList[21]
      this.cat_id[6] = this.cateList[24]
      this.cat_id[7] = this.cateList[23]
      this.cat_id[8] = this.cateList[7]
      this.cat_id[9] = this.cateList[0]
      this.cat_id[10] = this.cateList[13]
      this.cat_id[11] = this.cateList[19]
      this.cat_id[12] = this.cateList[12]
      this.cat_id[13] = this.cateList[28]
      // console.log(this.cat_id)
      // console.log(this.cateList)
      this.getGoodsList()
      if (this.$route.query) {
        this.is_active = !this.is_active
      }
    },
    //  根据id显示对性的内容
    async showContentById (id) {
      // console.log(id)
      this.isShowGoods = true
      this.goodsList = []
      this.goodsList.push(this.cat_id[id])
      // console.log(this.goodsList)
    },
    //  移入展示框的操作
    showInfo () {
      this.goodsList = []
      const index = Number(this.cat_index)
      this.goodsList.push(this.cat_id[index])
      console.log(this.goodsList)
      this.isShowGoods = true
      // this.$forceUpdate()
    },
    //  根据id展示商品的详细信息
    showGoodsDetail (i) {
      // console.log(i)
      this.$router.push({
        path: '/goods_detail',
        query: {
          id: i
        }
      })
    },
    //  关闭选项时的操作
    closeContentById (i) {
      this.cat_index = i
      // console.log(i)
      this.goodsList = []
      this.isShowGoods = false
    },
    //  回到top
    goTop () {
    },
    //  跳转登陆功能
    toLogin () {
      this.$router.push('/shop_login')
    },
    toLoginOut () {
      window.sessionStorage.clear()
      this.getCateList()
    },
    //  跳转登陆功能
    toReg () {
      this.$router.push('/shop_register')
    },
    //  跳转商城功能
    toMyShop () {
      this.$router.push('/shop_myshop')
    },
    toCart () {
      this.$router.push('/cart')
    },
    //  获取下一栏的商品
    async getGoodsList () {
      const { data: res } = await this.$http.get('v2/goods', { params: this.goodsQueryInfo })
      // console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品失败！')
        // console.log(res.data)
      }
      // console.log(res.data.goods)
      this.$message.success('获取商品成功！')
      this.goodList = res.data.goods.filter(n => n.is_promote === true)
      this.goodList1 = this.goodList.slice(0, 30)
      // console.log(this.goodList1)
      for (const item of this.goodList1) {
        // console.log('获取图片')
        const { data: res } = await this.$http.get(`v2/goods/${item.goods_id}`)
        if (res.meta.status !== 200) {
          return this.$message.error('获取商品的图片失败！')
        }
        // this.$message.success('获取商品的图片成功！')
        this.goodList2.push(res.data)
        if (this.goodList2.length > 10) { this.goodList3 = this.goodList2.slice(0, 10) }
        if (this.goodList2.length > 20) {
          this.goodList4 = this.goodList2.slice(10, 20)
          console.log(this.goodList4.length)
        }
      }
      // console.log(this.goodList3)
    },
    //  监听点击分类进入分类页的事件
    toCateGoods (i) {
      console.log('点击了' + i)
      this.$router.push({
        path: '/cate_goods',
        query: { id: i }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
    font-family: Microsoft YaHei, serif, tahoma;
    /*-webkit-filter: grayscale(.95);*/
    /*background-color: #f1f1f1;*/
    > em {
      font-style: normal;
      color: rgb(255, 0, 54);
      margin: auto;
    }
  }
  .menu {
    margin-left: 10%;
    /*height: 400px;*/
    margin-top: 30px;
    width: 200px;
    background-color: #696969;

    > .menubar {
      background-color: rgb(255, 0, 54);
      height: 36px;
      text-align: center;
      color: #ffffff;
      line-height: 36px;
    }
  }

  .bg {
    width: 100%;
    height: 500px;
    /*background: #000;*/
    background: #e8e8e8 url("../../assets/imgs/轮播图1.jpg") no-repeat 10% 0;
  }

  .contentmenu {
    margin-left: 10%;
    width: 200px;
    height: 500px;
    background-color: #696969;
    opacity: 0.5;
    overflow: hidden;
    color: #ffffff;
    display: inline-block;
    font-family: "Microsoft YaHei", serif;

    > ul > li {
      height: 31px;
      cursor: pointer;
      padding-top: 5px;

      > i {
        margin: 0 4px 0 14px;
      }
    }

    > ul > li:hover {
      background-color: #ffffff;
      color: #0086b3;
    }
  }

  #top {
    position: absolute;
    right: 80px;
    bottom: 80px;
  }

  .goods {
    height: 500px;
    width: 1000px;
    /*line-height: 500px;*/
    position: absolute;
    float: right;
    display: inline-block;
    background: white;
    overflow: hidden;
    /*background: url("../../assets/imgs/s13.jpg");*/

    > .goods_one {
      width: 200px;
      height: 200px;
      border: 1px solid black;

      > .goods_two {
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }
    }
  }

  .line {
    border: 1.2px solid rgb(255, 0, 54);
    width: 1500px;
  }

  .el-col {
    /*border: 1px solid red;*/
    margin: 0;
    padding: 0;
  }

  .el-table {
    margin: 0 !important;
    padding: 0 !important;

    > .el-table-column {
      margin: 0;
      padding: 0;
    }
  }

  .goods-line {
    margin-left: 10%;
    width: 214px;
    height: 25px;
    line-height: 25px;
    background-color: #1AB165;
    color: #ffffff;
    font-size: 16px;
    position: relative;
    top: 20px;
    left: 10px;
    border: none;
    margin-bottom: 30px;
    text-align: center;
  }

  .line1 {
    margin-left: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
    overflow: hidden;
    flex-wrap: wrap;
    background: #f1f1f1;
    margin-bottom: 20px;
    width: 1246px;
    height: 624px;

    > .line1_good {
      width: 236px;
      height: 302px;
      background: white;
      display: flex;
      /*flex-direction: row;*/
      flex-wrap: wrap;
      justify-content: center;
      /*align-items: start;*/
      margin: 5px 5px 5px 5px;
      text-align: center;

      > .line1_shop_pic {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 185px;
        height: 185px;
        margin-top: 10px;
        background: #000;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      .line1_shop_des {
        width: 135px;
        height: 58px;
        margin-bottom: 10px;

        > .line_shop_des_name {
          width: 135px;
          height: 40px;
          overflow: hidden;
        }

        > .line_shop_des_price {
          width: 135px;
          height: 18px;
          margin: 10px 0 10px 0;
          color: rgb(255, 0, 54);
          font-size: larger;
        }
      }
    }
    >.line1_good:hover{
      mso-border-shadow: yes;
    }
  }

  .line3 {
    margin-left: 10%;

    > img {
      width: 100%;
    }
  }

  .container .span24 {
    width: 100%;
    margin-right: 0;
  }

  .footer .footerAd {
    text-align: center;
    /*position: relative;*/
    /*top: 30px;*/
  }

  .footer .bottomNav {
    margin-bottom: 10px;
    text-align: center;
  }

  .footer .bottomNav li {
    line-height: 26px;
    display: inline;
  }

  .footer .bottomNav a {
    margin: 0 10px;
  }

  .footer .copyright {
    line-height: 30px;
    margin-bottom: 10px;
    color: #555555;
    text-align: center;
  }

  .bottomNav > li > a {
    cursor: pointer;
  }

  .el-tag {
    margin: 7px;
  }

  .bdtop {
    border-top: 1px solid #eee;
  }

  .bdbottom {
    border-bottom: 1px solid #eee;
  }

  .vcenter {
    display: flex;
    align-items: center;
  }
</style>
